import React, { useState, useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import { LeftOutline, SendOutline, RightOutline, TruckOutline, CheckCircleOutline } from 'antd-mobile-icons'
import './index.less'
import Gg from './alert/Gg'
import HydJ from './alert/hydJ'
import Banner from '../../components/banner'
import { connect } from 'react-redux'
import action from '../../store/action'

function Xq(props) {
    const [count, setCount] = useState({
        Djflag: false,
        Ggflag: false,
    })
    useEffect(() => {

    }, [])
    let item = props.location.state
    console.log(item);
    let arr = [item.img]
    function close(flag) {
        if (flag) {
            setCount({ ...count, Djflag: false })
        }
    }
    function close1(flag) {
        if (flag) {
            setCount({ ...count, Ggflag: false })
        }
    }
    return (
        <div className="Xq">
            <Banner imgdata={arr} />
            <p className="fan" onClick={() => {
                props.history.go(-1)
            }}><LeftOutline /></p>
            <p className="shopIcon iconfont icon-gouwuche" onClick={() => {
                props.history.push('/shopCar')
            }}></p>
            <div className="cont">
                <p className="name">{item.name}</p>
                <p className="Xqjs">{item.Xqjs}</p>
                <p className="money">
                    <span>￥{item.price}</span>
                    <span>/盒</span>
                </p>
                <p className="share"><SendOutline fontSize={25} color={'#BFBFBF'} /></p>
                <div className="Class" onClick={() => {
                    setCount({ ...count, Djflag: true })
                }}>
                    <p>M5等级</p>
                    <p>脂肪比例适中,适合5~7分熟</p>
                    <p><RightOutline /></p>
                </div>
                <div className="JieShao">
                    <div><p>和牛</p><p>品种</p></div>
                    <h4></h4>
                    <div><p>澳大利亚</p><p>原料产地</p></div>
                    <h4></h4>
                    <div><p>谷饲</p><p>饲养方式</p></div>
                    <h4></h4>
                    <div><p>M5原切</p><p>推荐理由</p></div>
                </div>
                <div className="Order">
                    <p><TruckOutline fontSize={30} color={'#09AFFF'} /></p>
                    <div>
                        <p>现在下单，最快明日8:30-10:30送达</p>
                        <p>首单免运费</p>
                    </div>
                </div>
                <div className="Th">
                    <CheckCircleOutline fontSize={20} color={'#09AFFF'} />
                    <span>不支持7天无理由换货</span>
                </div>
                <div className="Xuan" onClick={() => {
                    setCount({ ...count, Ggflag: true })
                    props.getItem(item)
                }}>
                    <p>已选：150g/一盒</p>
                    <p><RightOutline /></p>
                </div>
                <div className="evaluate">
                    <div onClick={() => {
                        console.log(props.history.location);
                        props.history.push({
                            pathname: '/pj',
                            state: item.Pj
                        })
                    }}>
                        <p>评价<span>({item.Pj.length})</span></p>
                        <p>查看全部<RightOutline /></p>
                    </div>
                    <div>
                        <p><img src={item.Pj[0].img} />{item.Pj[0].Name}</p>
                        <p>{item.Pj[0].cont}</p>
                    </div>
                </div>
                <div className="textXq">
                    商品详情
                </div>
                <div className="tableXq">
                    <ul>
                        <li>品牌:</li>
                        <li>产地:</li>
                        <li>净含量:</li>
                        <li>储存方式:</li>
                    </ul>
                    <ul>
                        {
                            item.Xq.map((item, index) => {
                                return <li key={index}>{item}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
            <div>
                <img className="bigImg" src={require('./img/QQ截图20211119193504.png').default} />
            </div>
            <div className="addCar">
                <div>
                    <span className="iconfont icon-24gl-headset"></span>
                    <span>售前咨询</span>
                </div>
                <div>
                    <button onClick={() => {
                        setCount({ ...count, Ggflag: true })
                        props.getItem(item)
                    }}>加入购物车</button>
                </div>
            </div>
            {
                count.Djflag ? <HydJ close={close} /> : null
            }
            {
                count.Ggflag ? <Gg close={close1} /> : null
            }
        </div>
    )
}
export default connect(state => state, action.Xq)(withRouter(Xq))